<template>
  <div @touchmove="touchmove">
    <van-calendar
      :show-confirm="false"
      v-model="showDate"
      @confirm="onConfirm"
    />
    <van-popup
      v-model="show"
      position="left"
      class="fa"
      :style="{ height: '100%', width: '100%' }"
    >
      <div style="height: 100%;width: 100%;">
        <div ref="topref">
          <van-nav-bar
            title="客户信息"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
          />
          <van-form>
            <div class="client">
              <van-field label="客户编码：" v-model="entity.cCusCode" readonly>
              </van-field>
              <van-field label="客户名称：" v-model="entity.cCusName" readonly>
              </van-field>
              <van-field label="单据日期: " v-model="entity.dDate" readonly>
              </van-field>
              <van-field
                rows="1"
                autosize
                type="textarea"
                label="收货地址: "
                v-model="entity.cCusOAddress"
                readonly
              >
              </van-field>
            </div>
          </van-form>
        </div>
        <van-tabs
          v-model="active"
          @change="tablechange"
          :style="styletab"
          class="tabsinfo"
        >
          <van-tab title="订单信息">
            <div class="formalBox">
              <van-list
                v-model="loading0"
                :immediate-check="false"
                :finished="finished0"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div class="boxFormal" v-for="item in data0" :key="item.Id">
                  <div class="companyName" style="font-size: 14px;">产品名称:{{ item.cInvName }}</div>

                  <div class="rightFlax">
                    <div>订单号:{{ item.cSOCode }}</div>

                    <div>编码:{{ item.cInvCode }}</div>
                  </div>
                  <div class="code">
                    <div style="padding-right: 30px">
                      数量:{{ item.iQuantity }}
                    </div>
                    <div>
                      单价(元):{{
                        item.iTaxUnitPrice
                          ? Number(item.iTaxUnitPrice)
                              .toFixed(2)
                              .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                          : item.iTaxUnitPrice
                      }}
                    </div>
                  </div>
                </div>
              </van-list>
            </div>
          </van-tab>
          <van-tab title="发货信息">
            <div class="formalBox">
              <van-list
                v-model="loading1"
                :finished="finished1"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div class="boxFormal" v-for="item in data1" :key="item.Id">
                  <div class="companyName" style="font-size:14px">产品名称:{{ item.cinvname }}</div>
                  <div class="rightFlax">
                    <div>单号:{{ item.cdlcode }}</div>
                    <div>日期:{{ item.ddate }}</div>
                  </div>
                  <div class="code">
                    <div style="padding-right: 30px">
                      发货金额(元):{{
                        item.isum
                          ? Number(item.isum)
                              .toFixed(2)
                              .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                          : item.isum
                      }}
                    </div>
                    <div >发货数量:<span v-format="'#,##0'">{{ item.iquantity }}</span> </div>
                  </div>
                </div>
              </van-list>
            </div>
          </van-tab>
          <van-tab title="出库信息">
            <div class="formalBox">
              <van-list
                v-model="loading2"
                :finished="finished2"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div class="boxFormal" v-for="item in data2" :key="item.Id">
                  <div class="companyName" style="font-size: 14px;">产品名称:{{ item.cinvname }}</div>
                  <div class="rightFlax">
                    <div>单号:{{ item.ccode }}</div>
                    <div>日期:{{ item.ddate }}</div>
                  </div>
                  <div class="code">
                    <div>批号:{{ item.cbatch }}</div>
                    <div>出库数量:{{ item.iquantity }}</div>
                  </div>
                </div>
              </van-list>
            </div>
          </van-tab>
          <van-tab title="发票信息">
            <div class="formalBox">
              <van-list
                v-model="loading3"
                :finished="finished3"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div class="boxFormal" v-for="item in data3" :key="item.Id">
                  <div class="companyName" style="font-size: 14px;">产品名称:{{ item.cinvname }}</div>

                  <div class="rightFlax">
                    <div>单号:{{ item.csbvcode }}</div>
                    <div>日期:{{ item.ddate }}</div>
                  </div>

                  <div class="code">
                    <div>
                      金额(元):{{
                        item.isum
                          ? Number(item.isum)
                              .toFixed(2)
                              .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                          : item.isum
                      }}
                    </div>
                    <div>数量:{{ item.iquantity }}</div>
                  </div>
                </div>
              </van-list>
            </div>
          </van-tab>
          <van-tab title="收款信息">
            <div class="formalBox">
              <van-list
                v-model="loading4"
                :immediate-check="false"
                :finished="finished4"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div class="boxFormal" v-for="item in data4" :key="item.Id">
                  <!-- <div class="companyName">客户名称:{{ item.cCusAbbName }}</div> -->

                  <div class="rightFlax">
                    <div>单号:{{ item.cVouchID }}</div>

                    <div>日期:{{ item.dVouchDate }}</div>
                  </div>
                  <div class="code">
                    <div style="padding-right: 30px">
                      收款金额(元):{{
                        item.iAmt_f
                          ? Number(item.iAmt_f)
                              .toFixed(2)
                              .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                          : item.iAmt_f
                      }}
                    </div>
                    <!-- <div>数量:{{ item.iquantity }}</div> -->
                  </div>
                </div>
              </van-list>
            </div></van-tab
          >
        </van-tabs>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Icon } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";

import {
  Row,
  Col,
  Cell,
  CellGroup,
  Stepper,
  Toast,
  Calendar,
  NavBar
} from "vant";
import { Field } from "vant";
//客户

export default {
  components: {
    "van-stepper": Stepper,
    "van-calendar": Calendar,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup
  },
  data() {
    return {
      styletab: "",
      showType: false,
      data0: [],
      loading0: false,
      finished0: false,
      PageRows0: 5,
      data1: [],
      loading1: false,
      finished1: false,
      PageRows1: 5,
      data2: [],
      loading2: false,
      finished2: false,
      PageRows2: 5,
      data3: [],
      loading3: false,
      finished3: false,
      PageRows3: 5,
      data4: [],
      loading4: false,
      finished4: false,
      PageRows4: 5,

      active: 0,
      value: "",
      showArea: false,
      areaList: {},
      columns: [],
      showPicker: false,
      entity: {},

      show: false,
      showDate: false,
      Id: ""
    };
  },
  created() {
    // 初始化加载订单信息tab
    this.loading0 = true;
    // 初始化没有加载完成订单信息tab
    this.finished0 = false;
    console.log(this.$route.query.Id);
    var obj = {
      ID: this.$route.query.Id
    };
    this.openForm(obj);
  },
  mounted() {
    this.$nextTick(() => {
      this.styletab = `watch:100%;height:calc(100% - ${this.$refs.topref
        .offsetHeight + 20}px);overflow: hidden;`;
    });
  },
  computed: {},
  methods: {
    onLoad() {
      this["PageRows" + this.active] += 20;
      console.log(123456);
      this.getTableData(this.active);
    },
    swipeleft() {
      this.show = false;
      // alert("123");
    },
    touchstart(e) {
      // alert("123");

      // e.preventDefault();

      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    touchmove(e) {
      // this.show = false;
      // e.preventDefault();
      this.moveX = e.touches[0].clientX;
      this.moveY = e.touches[0].clientY;
      // this.startX - this.moveX <= 0
      //   ? console.log("你在往右滑")
      //   : console.log("你在往左滑");
    },
    tablechange(key) {
      console.log(key);
      this.active = key;
      switch (this.active) {
        case 0: // 清空列表数据
          this.data0 = [];
          // 重置化加载中
          this.loading0 = true;
          // 重置化数据没有全部加载完成
          this.finished0 = false;
          break;

        case 1: // 清空列表数据
          this.data1 = [];
          // 重置化加载中
          this.loading1 = true;
          // 重置化数据没有全部加载完成
          this.finished1 = false;
          break;

        case 2: // 清空列表数据
          this.data2 = [];
          // 重置化加载中
          this.loading2 = true;
          // 重置化数据没有全部加载完成
          this.finished2 = false;
          break;

        case 3: // 清空列表数据
          this.data3 = [];
          // 重置化加载中
          this.loading3 = true;
          // 重置化数据没有全部加载完成
          this.finished3 = false;
          break;
        default:
          this.data4 = [];
          // 重置化加载中
          this.loading4 = true;
          // 重置化数据没有全部加载完成
          this.finished4 = false;
      }
      // if (key > 0) {
      //   // if (this["data" + key].length > 0) return;
      //   this.getTableData(key);
      // }
      this.getTableData(key);
    },
    getTableData(key) {
      let url = "";
      if (key == 0) url = "/OrderManagement/SO_SODetails/GetDataList";
      else if (key == 1)
        url = "/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendDis";
      else if (key == 2)
        url = "/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendOut";
      else if (key == 3)
        url = "/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendBill";
      else if (key == 4)
        url = "/OrderManagement/SO_SOMain/GetSA_ProcessGathering";
      this.http
        .post(url, {
          PageIndex: 1,
          PageRows: this["PageRows" + key],
          Search:
            key === 0
              ? {
                  Condition: "cSOCode",
                  Keyword: this.entity.cSOCode
                }
              : [
                  {
                    Condition: "cSOCode",
                    Keyword: this.entity.cSOCode
                  }
                ]
        })
        .then(res => {
          if (res.Success) {
            console.log('获取1111',res.Data)
            res.Data.forEach(item=>{
              if(item.iquantity){
                item.iquantity = item.iquantity.replace('.0000000000', '')
              }
              console.log('格式化', item.iquantity)
            })
            this["loading" + key] = false;
            this["data" + key] = res.Data;
            if (this["data" + key].length >= res.Total) {
              this["finished" + key] = true;
            }
          } else {
            Toast(res.Msg);
          }
        });
    },
    onConfirm() {},
    //返回
    onClickLeft() {
      this.$router.go(-1);
      this.show = false;
    },

    //关闭
    close() {
      this.show = false;
    },

    getDataList(item) {
      this.http
        .post("/OrderManagement/SO_SODetails/GetDataList", {
          PageIndex: 1,
          PageRows: 999,
          Search: {
            Condition: "cSOCode",
            Keyword: item.cSOCode
          }
        })
        .then(res => {
          if (res.Success) {
            this.data = res.Data;
            console.log(this.data);
          } else {
            Toast(res.Msg);
          }
        });
    },
    init() {
      this.Id = "";
      this.show = true;
      this.active = 0;
      // this.data0 = [];
      this.entity = {};
    },

    openForm(item) {
      this.init();
      // this.getDataList(item);
      console.log(item);
      if (item) {
        this.Id = item.ID;
        // this.getDataList();
        this.http
          .post("/OrderManagement/SO_SOMain/GetTheData", {
            ID: item.ID
          })
          .then(resJson => {
            this.entity = resJson.Data;
            if (this.entity.dDate) {
              this.entity.dDate = this.entity.dDate.substring(0, 10);
            }
            console.log(this.entity.cSOCode);
            this.getTableData(this.active);
          });
      }
    }
  }
};
</script>

<style scoped>
.client {
  box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
}
.code {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
  color: #777;
}
.rightFlax {
  margin-left: 10px;
}

.formalBox {
  height: 100%;
  /* padding-bottom: 250px; */
  box-sizing: border-box;
  overflow: auto;
}

.companyName {
  font-size:14px;
  padding-top: 10px;
  margin-left: 10px;
  margin-bottom: 5px;
  color: #000000;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
}

.boxFormal {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;

  width: 95%;
  /* height: 80px; */
  padding-bottom: 10px;
  margin: 3px auto;
  margin-bottom: 10px;
}
.tabsinfo >>> .van-tabs__content {
  height: calc(100% - 44px);
}
.van-tab__pane {
  height: 100%;
}
</style>
